<template>
  <div id="app">
    <Header class="header"/>
    <router-view class="body"/>
    <Footer class="footer"/>
  </div>
</template>
<script>
import Header from '@/components/header.vue';
import Footer from '@/components/footer.vue'
export default {
    components:{
        Header,
        Footer
    },
    data () {
        return {

        }
    },
    methods: {
        initRem () {
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            if(oWidth < 1000){
                html.style.fontSize = oWidth/750*100 + "px";
            }else{
                html.style.fontSize = 'unset'
            }

        }
    },
    mounted () {
        window.onload = ()=>{
                    this.initRem()
        };
        window.onresize = ()=>{
            this.initRem()
        };

    }

}
</script>
<style lang="scss" type="text/css" scoped>
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-top:300px;
  padding-bottom: 88px;
  box-sizing: border-box;
  &.mobile{
      .body{
          width:100%
      }
  }
  .footer{
      position: fixed;
      left:0;bottom:0;
      z-index: 9999;
  }
  .header{
      position: fixed;
      left: 0;top: 0;
        z-index: 9999;

  }
  .body{
      height: 100%;
      overflow: auto;
      width: 1200px;
      margin: 0 auto;

  }
}
@media screen and (max-width: 1000px) {
   #app{
       width: 100%;
       height: 100%;
       font-size: 0.12rem;
        padding-bottom: .88rem;
        box-sizing: border-box;
        padding-top:3.68rem;
   }
   .body{
       width:100% !important;
   }
}
</style>

